<template>
	<view class="container margin-lr">
		<use-navbar title="账号安全"></use-navbar>

		<view class="dflex-c pos-r margin-bottom margin-top">
			<view class="portrait-box">
				<image class="border-radius-c" :src="member.member_headimg || '/static/images/user/default.png'">
				</image>
			</view>
			<view class="margin-left-sm">
				<view>
					<text class="username">{{ member.member_name || appabbr || '用云' }}</text>
				</view>
				<view v-if="member.slogan"><text class="fs-xxs">{{ member.slogan }}</text></view>
				<view v-else-if="member.member_city"><text class="fs-xxs">{{ member.member_city }}</text></view>
			</view>
		</view>

		<view class="border-radius">
			<use-list-title title="手机号" iconfont=" " rightIcon=" " :tip="member.member_mobile"></use-list-title>
			<use-list-title :title="passwordName" iconfont=" " tip="已设置" @goto="toForgetPassword"></use-list-title>
			<!-- #ifdef APP -->
			<!-- <use-list-title title="实名认证" iconfont=" " @goto="toRealname" tip="未认证"></use-list-title> -->
			<!-- #endif -->
		</view>

		<view class="margin-top margin-left-sm fwb">账号绑定</view>
		<view class="border-radius margin-top-sm">
			<!-- #ifndef MP-ALIPAY -->
			<use-list-title title="微信" iconfont=" " :tip="wxBindState" @goto="toBindWeixin"></use-list-title>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<!-- <use-list-title title="指纹" iconfont=" " tip="未设置"></use-list-title> -->
			<!-- #endif -->
			<!-- #ifdef APP || MP-ALIPAY -->
			<use-list-title title="支付宝" iconfont=" " tip="未设置"></use-list-title>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<!-- <use-list-title v-if="isiOS" title="Apple" iconfont=" " tip="已设置"></use-list-title> -->
			<!-- #endif -->
		</view>

		<!-- <view class="margin-top margin-left-sm fwb">其它</view>
		<view class="border-radius margin-top-sm">
			<use-list-title title="账号注销" iconfont=" " tip="数据无法恢复"></use-list-title>
		</view> -->

		<view class="padding"></view>
	</view>
</template>

<script setup>
	// --选项式 API

	import {
		ref,
		reactive,
		onMounted,
		computed,
		watch,
		getCurrentInstance
	} from 'vue'

	import {
		storeToRefs
	} from 'pinia';
	import {
		useUserStore
	} from '@/store'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	const {
		ctx,
		proxy
	} = getCurrentInstance();
	console.log("ctx", ctx);
	const title = ref("标题")
	let UserStore = useUserStore()
	const member = ref({});
	const isiOS = ref(false)
	const wxBindState = ref('')
	onLoad((option) => {
		member.value=UserStore.member;
		proxy.$utils.get_env(res => {
			this.isiOS = res.os && res.os.name == 'ios';
		});

		// #ifdef APP-PLUS
		plus.oauth.getServices((services) => {
			weixinAuthService = services.find((service) => {
				return service.id === 'weixin'
			})
		});
		// #endif
		// 加载微信绑定状态
		loadWeixinState();
	});

	onShow(() => {
		console.log("B 页面 onShow");
		if (!UserStore.islogin) {
			proxy.$utils.msg('账号未登录');
			return;
		}
	});
	const toRealname = () => {

	}
	const loadWeixinState = () => {
		// 微信绑定数据
		const weixin = member.value.member_weixin;

		// #ifdef APP
		wxBindState.value = weixin && weixin.app ? '已绑定' : '未绑定';
		return;
		// #endif

		// #ifdef MP-WEIXIN
		wxBindState.value = weixin && weixin.mp ? '已绑定' : '未绑定';
		return;
		// #endif

		// #ifdef H5-WEIXIN
		wxBindState.value = weixin && weixin.h5 ? '已绑定' : '未绑定';
		return;
		// #endif

		wxBindState.value = weixin && (weixin.app || weixin.mp || weixin.h5) ? '已绑定' : '未绑定';
	}
	const getWeixinCode = async () => {
		return new Promise((resolve, reject) => {
			// #ifdef MP-WEIXIN
			uni.login({
				success: res => {
					console.log('uni.login', res);
					resolve(res.code);
				}
			});
			// #endif
			// #ifdef APP
			weixinAuthService.authorize((res) => {
				console.log('app authorize res', res);
				resolve(res.code)
			}, (err) => {
				console.log('app authorize err', err);
				reject(new Error('微信登录失败'))
			});
			// #endif
		})
	}
	const toBindWeixin = async () => {
		// #ifdef APP || MP-WEIXIN
		uni.showModal({
			title: '提示',
			content: this.wxBindState === '已绑定' ? '解绑微信账号' : '绑定微信账号',
			success: (mres) => {
				if (mres.cancel) {
					return;
				}

				if (this.wxBindState === '已绑定') {
					// 解绑微信
					unbindWeixin();
					return;
				}
				// 绑定微信
				this.bindWeixin();
			}
		});
		return;
		// #endif

		proxy.$utils.msg('当前环境不支持此操作');
	}
	const bindWeixin = async () => {
		const code = await getWeixinCode();
	}
	const unbindWeixin = async () => {
		const code = await getWeixinCode();

		uni.showLoading({
			title: '解绑中'
		});

	}
	const toForgetPassword = () => {
		// 忘记密码
		uni.navigateTo({
			url: '/sub-user/pages/setting/modify-password'
		});
	}

	const appabbr = computed(() => {
		return proxy.$config.appabbr;
	})
	const passwordName = computed(() => {
		return proxy.$config.appabbr+ '密码';
	})
</script>

<style lang='scss'>
	page {
		background: $uni-bg-color-grey;
	}

	image {
		width: 130rpx;
		height: 130rpx;
	}

	.use-item {
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		background: #fff;
	}
</style>